<template>
    <el-dialog :close-on-click-modal='false' title="项目素材汇集" :visible.sync="dialogVisible" @close="resetForm()" width="1100px">
        <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <el-table :data="exportData" class="com_table" height="400px">
                <el-table-column prop="create_time" label="开始日期/结束日期">
                    <template slot-scope="scope">
                        {{scope.row.start_time}}/{{scope.row.end_time}}
                    </template>
                </el-table-column>
                <el-table-column prop="channel" label="平台渠道">
                    <template slot-scope="scope">
                        {{filters.chanelName2(scope.row.channel)}}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="文件状态">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter" v-if="scope.row.status==0">
                            <div class="tm_y gray_y"></div>
                            <div class="tm_t gray_t">待执行</div>
                        </div>
                        <div class="flexbox flexcenter" v-else-if="scope.row.status==1">
                            <div class="tm_y yellow_y"></div>
                            <div class="tm_t yellow_t">执行中</div>
                        </div>
                        <div class="flexbox flexcenter" v-else-if="scope.row.status==3">
                            <div class="tm_y green_y"></div>
                            <div class="tm_t green_t">完成</div>
                        </div>
                        <div class="flexbox flexcenter" v-else-if="scope.row.status==4">
                            <div class="tm_y red_y"></div>
                            <div class="tm_t red_t">系统出错</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="have_sheet" label="飞书表格链接">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter">
                            <template v-if="scope.row.status!==3">
                                <svg width="56" height="32" viewBox="0 0 56 32" fill="none" xmlns="http://www.w3.org/2000/svg" style="no_point">
                                    <rect width="56" height="32" rx="4" fill="#A5B1D1" fill-opacity="0.1" />
                                    <g opacity="0.3">
                                        <path d="M20 8H33.3333C34.8061 8 36 9.19391 36 10.6667V24H22.6667C21.1939 24 20 22.8061 20 21.3333V8Z" fill="#35BD4B" />
                                        <path d="M23.8335 11.8335H31.0668C31.6743 11.8335 32.1668 12.326 32.1668 12.9335V20.1668H24.9335C24.326 20.1668 23.8335 19.6743 23.8335 19.0668V11.8335Z" stroke="white" />
                                        <path d="M23.8335 15.8335H32.3335" stroke="white" />
                                        <path d="M28 20L28 11.3333" stroke="white" />
                                    </g>
                                </svg>
                            </template>
                            <a class="flexbox flexcenter" :href="scope.row.feishu_sheet" target="_blank" :underline="false" v-else>
                                <svg width="56" height="32" viewBox="0 0 56 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="56" height="32" rx="4" fill="#A5B1D1" fill-opacity="0.1" />
                                    <path d="M20 8H33.3333C34.8061 8 36 9.19391 36 10.6667V24H22.6667C21.1939 24 20 22.8061 20 21.3333V8Z" fill="#35BD4B" />
                                    <path d="M23.8335 11.8335H31.0668C31.6743 11.8335 32.1668 12.326 32.1668 12.9335V20.1668H24.9335C24.326 20.1668 23.8335 19.6743 23.8335 19.0668V11.8335Z" stroke="white" />
                                    <path d="M23.8335 15.8335H32.3335" stroke="white" />
                                    <path d="M28 20L28 11.3333" stroke="white" />
                                </svg>
                            </a>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="action" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-link type="danger" :underline="false" @click="deletList(scope.row.id)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin-top:16px" background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :total="total">
            </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="resetForm()" class="el-button-width" size="small">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    components: {},
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            exportData: [],
            queryInfo: {
                page: 1,
                limit: 20,
            },
            total: 0,
        };
    },

    created() {
        
    },
    methods: {
        getData() {
            this.dialogVisible = true;
            this.queryInfo.page = 1
            this.getDataList();
        },

        //获取列表
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/material/proMaterialSummaryList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.total = res.data.count;
                this.exportData = res.data.list;
            }
        },

        // 删除视频
        deletList(id) {
            this.$confirm("是否要删除该数据?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/material/proMaterialSummaryDel",
                        {
                            id: id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.getDataList();
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
                .catch(() => {});
        },

        // 当前页切换
        handleCurrentChange(val) {
            this.queryInfo.page = val;
            this.getDataList()
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
        },
    },
};
</script>
<style scoped>
.option_content {
    line-height: 20px;
    margin-top: 5px;
}
.tm_y {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.tm_t {
    font-size: 14px;
    margin-left: 12px;
}
.gray_y {
    background: #b4b7bd;
}
.yellow_y {
    background: #fabc42;
}
.green_y {
    background: #00c271;
}
.red_y {
    background: #fe6262;
}
.gray_t {
    color: #b4b7bd;
}
.yellow_t {
    color: #fabc42;
}
.green_t {
    color: #00c271;
}
.red_t {
    color: #fe6262;
}
.no_point{
    cursor: no-drop;
}
</style>

